<template>
	<!-- 课程 -->
	<view>
		
		<view class="top">
			<!-- 所有内容的容器 -->
			<picker mode="multiSelector" @columnchange="columnChange" :range="courseList" :value="courseIndex" @change="bindCourseChange">            
				<view>
					{{courseList[0][courseIndex[0]]}}--{{courseList[1][courseIndex[1]]}}
				</view>
			</picker>
		</view>
		
		<view class="teacher_List">
			<view class="teacher"  v-for="(tech,index) in teacherList" v-if="tech.teach[index].stage==stage" :key="index" @click="toPage(tech.id)">
				<view class="left">
					<image :src="tech.photo" mode="aspectFill"></image>
				</view>
				<view class="content">
					<view class="title">
						{{tech.name}}
					</view>
					<view class="grade">
						<u-rate :value="tech.grade" disabled></u-rate>
					</view>
					<view class="degree">
						学历：{{tech.degree}}
					</view>
					<view class="major">
						专业：{{tech.major}}
					</view>
					<view class="intro">
						个人简介：{{tech.intro}}
					</view>
				</view>
				<view class="right">
					<view class="price">
						{{tech.price}}元/小时
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import data from "@/Components/teacherInfo.js"
	const courseJson = [[], ['请选择课程','语文','数学','英语'], ['请选择课程','语文','数学','英语','物理','化学'], ['请选择课程','语文','数学','英语','物理','化学'], ['请选择课程','围棋','唱歌','钢琴','小提琴','象棋']]
	export default {
		data() {
			const currentDate=this.getDate({
				format:true
			})
			return {
				time:"08:00",
				date:currentDate,
				stage:'请选择学习阶段',
				course:'请选择课程',
				show:false,
				closeable:true,
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '主页',
						count: 0,
						isDot: true,
						customIcon: false,
						pagePath: '/pages/navigation/home'
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '消息',
						customIcon: false,
						pagePath: '/pages/navigation/information'
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '查找',
						midButton: true,
						customIcon: false,
						pagePath: '/pages/navigation/seek'
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '课程',
						customIcon: false,
						pagePath: '/pages/navigation/curriculum'
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/navigation/my'
					},
				],
				current: 3,
				// show:false,
				courseList: [['请选择学习阶段','小学','初中','高中','课外'],["请选择课程"]],
				courseIndex: [0,0],
				teacherList:data.teacherInfo
			}
		},
		onLoad() {
			
		},
		computed:{
			starDate(){
				return this.getDate('start');
			},
			endDate(){
				return this.getDate('end');
			}
		},
		methods: {
			bindCourseChange(e){
				console.log(e.target.value)
				this.courseIndex = e.target.value
				this.stage=this.courseList[0][e.target.value[0]]
				this.course=this.courseList[1][e.target.value[1]]
				console.log(this.stage)
				console.log(this.course)
				// console.log(this.courseList[0,e.target.value[0]])
				// console.log(e.target)
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			bindTimeChange: function(e) {
				this.time = e.detail.value
			},
			columnChange(e) {
				const { column, value } = e.detail;
				this.courseIndex.splice(column, 1, value);
				if(column == 0) {
					this.courseList.splice(column + 1, 1, courseJson[value]);
				};
				// console.log(e.detail)
			},
			open() {
				console.log('open')
			},
			close() {
				this.show=false
			},
			toPage(id){
				// console.log()
				uni.navigateTo({
					url:'../../subpages/teacherInfo?id='+id
				})
			},
			getDate(type){
				const date=new Date();
				let year=date.getFullYear();
				let month=date.getMonth();
				let day=date.getDate();
			
				if(type==='start'){
					year=year-1;
				}else if(type==='end'){
					year=year+2;
				}
				
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>
	
<style>
	page{
/* 		margin: 0;
		padding: 0; */
		background-color: #f3f4f6;
	}

	.top{
		height: 100rpx;
		width: 100%;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.teacher_List{
		background-color: #ffffff;
		/* width: 94%; */
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.teacher{
		height: 300rpx;
		width: 94%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-bottom: 5px rgb(23, 150, 230);
		/* margin-bottom: 6rpx; */
	}
	.teacher .left image{
		height: 240rpx;
		width: 160rpx;
		border-radius: 20rpx;
		background-color: rgb(23, 150, 230);
	}
	
	.teacher .content{
		width: 40%;
		display: flex;
		flex-direction: column;
	}
	.teacher .content .title{
		font-size: 40rpx;
		font-weight: bold;
	}
	
	.teacher .content .intro{
		overflow: hidden;
		text-overflow: ellipsis;  /* 超出部分省略号 */
		display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2; /** 显示的行数 **/
	}
	
	.teacher .right{
		margin-bottom: 50rpx;
		color: crimson;
	}
</style>
